<template>
	<view class="zhujiemian">
		<!-- 头部背景 -->
		   <view class="hed"></view>
		   <!-- 登录块 -->
		   <view class="login">
			   <!-- 输入框 -->
		   	     <view class="shuru">
		   	     	<input type="number" v-model="value1" @focus="setvalue1" />
					<input type="number" v-model="value2" @focus="setvalue2" />
		   	     </view>
				 <view class="xieyi">
					      <checkbox @click="dianji"></checkbox>
						  <text>我已同意网上药店协议</text>
				 </view>
				  <view id="butt">
					  <button @click="tijiao">确认</button>
				  </view>
		   </view>
		  <!-- 第三方登录 -->
		  <view class="disan">
			     <text >第三方登录方式</text>
				 <view class="tubiao">
				 	<text class="iconfont icon-QQ"></text>
				 	<text class="iconfont icon-weixin-copy"></text>
				 </view>
		  </view>
	</view>
</template>

<script>
	import {reactive,toRefs} from "vue"
	import http from "../../utils/http.js"
	import store from '../../store/index.js'
	import {mapState,useStore} from 'vuex'
	export default {
		setup(){
			const {state,getters,commit,dispatch} = useStore();
			let data=reactive(
			   {
				   value1:"请输入手机号",
				   value2:"请输入密码",
				   setvalue1:()=>{
					   data.value1=""
				   },
				   setvalue2:()=>{
				   	data.value2=""
				   },
				   queren:false,
				   dianji:()=>{
					   data.queren=!data.queren
				   },
				   tijiao:()=>{
					   // console.log(typeof(data.value1))
					   if(!data.queren){
						   uni.showToast({
						   	icon:"error",
						   	title: '没有勾选协议',
						   	duration: 2000
						   });
						   
					   }else{
						   if(data.value1==""||data.value1=="请输入手机号"){
						   							   uni.showToast({
						   							   	icon:"error",
						   							   	title: '请输入账号',
						   							   	duration: 2000
						   							   });
						   }else if(data.value2==""||data.value1=="请输入密码"){
						   							   uni.showToast({
						   							   	icon:"error",
						   							   	title: '请输入密码',
						   							   	duration: 2000
						   							   });
						   }else{
							   http({
							   	   					   url:"/APPlogin",
							   	   						   method:"get",
							   	   						   data:{
							   	   							   username:data.value1,
							   	   							   password:data.value2
							   	   						   }
							   	   					   }).then((res)=>{
							   	   						   console.log("res",res)
							   	   						   // console.log(res.data.token)
							   	   						   // console.log(res.data.data[0].g_id)
							   	   						   const token=res.data.token||""
							   	   						   uni.setStorage({
							   	   							   key: 'token',
							   	   							   data:token,
							   	   						   })
														   commit('XIUid',res.data.data[0].y_id)
							   	   						   if(res.data.code==200){
							   	   							   uni.showToast({
							   	   							   	title: '登录成功',
							   	   							   	duration: 2000
							   	   							   });
							   	   							  setTimeout(()=>{
							   	   								  uni.switchTab({
							   	   								  	url:"../index/index"
							   	   								  })
							   	   							  },2000)
							   	   						   }else{
							   	   							   uni.showToast({
							   	   								icon:"error",
							   	   							   	title: '账号或者密码错误',
							   	   							   	duration: 2000
							   	   							   });
							   	   						   }
							   	   					   }).catch((err)=>{
														   uni.showToast({
														    icon:"error",
														   	title: '账号或者密码错误',
														   	duration: 2000
														   });
							   	   						   console.log("err",err)
							   	   					   })
							   }
						   }
						   
					   
					   
					   // console.log(data.queren)
				   }
				   
			   }
			)
			
			return {...toRefs(data)}
		}
	}
</script>

<style scoped lang="scss">
	@import url("~@/static/fonts/iconfont.css");
	.zhujiemian{
		position: relative;
	}
	.hed{
		width: 750rpx;
		height: 400rpx;
		background-color:#ff0000;
	}
	.login{
		position: absolute;
		top: 300rpx;
		left: 75rpx;
		width: 600rpx;
		height: 500rpx;
		border: 1px solid #ececec;
		background-color: #ffffff;
	}
	.shuru{
		margin-top: 10rpx;
		width: 600rpx;
		height: 300rpx;
		// border: solid 1rpx red;
	}
	.shuru > input{
		color: #C0C0C0;
		border-bottom: 4rpx solid #bebebe;
		height: 60rpx;
		width: 550rpx;
		margin-top: 40rpx;
		float: right;
	}
    .xieyi{
		// float:right;
		margin-left: 80rpx;
		width: 550rpx;
		// border: 1px solid red;
		height: 50rpx;

		
	}
	.xieyi > text{
		vertical-align:middle
	}
	#butt{
		margin-top: 30rpx;
		width: 600rpx;
		height: 90rpx;
		// border: 1rpx solid red;
	}
	#butt >button{
		width: 400rpx;
		background-color: red;
		color:#FFFFFF;
	}
	.disan{
		position: absolute;
		bottom: -730rpx;
		width: 750rpx;
		height: 300rpx;
		// border: 1rpx solid red;
	}
	.disan > text {
		display: inline-block;
		width: 750rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #999999;
	}
	.tubiao{
		margin-left: 225rpx;
		width: 300rpx;
		text-align: center;
		display: flex;
		justify-content: space-around;
	}
	.tubiao >text:nth-child(1){
		font-size: 3rem;
		color: #007AFF;
	}
	.tubiao >text:nth-child(2){
		font-size: 3rem;
		color: #55ff7f;
	}
</style>
